<template>
  <div>
    <div class="file" :class="{ 'file-collapse': !props.fileExpandCollapse }">
      <div class="flex flex-sb">
        <file-upload
          @successfully="uploadSuccessfully"
          v-show="props.fileExpandCollapse"
          :limit="999"
          :uploadUrl="'/tools/ocr/uploadAnalysis'"
        />
        <img
          src="@/assets/images/analysis/expand.png"
          class="file-expand"
          :class="{ 'file-expand-collapse': !props.fileExpandCollapse }"
          @click="handleExpandCollapse"
        />
      </div>
      <div v-show="props.fileExpandCollapse" class="flex mt-10 mb-25">
        <div class="flex flex-ai-center c-primary f-14 mr-30 pointer" @click="handleReanalysis">
          <el-icon class="mr-5 f-18"><RefreshRight /></el-icon>
          重新解析
        </div>
        <div class="flex flex-ai-center c-ff0000 f-14 pointer" @click="handleDelete">
          <el-icon class="mr-5 f-16"><Delete /></el-icon>
          删除
        </div>
      </div>
    </div>
    <div v-if="fileList && fileList.length > 0" class="analysis-scrollbar">
      <div
        @click="handleSelect(item)"
        v-for="item in fileList"
        :key="item.id"
        class="file-item"
        :class="{ active: selectItem && selectItem.id == item.id, 'file-item-collapse': !props.fileExpandCollapse }"
      >
        <el-tooltip :content="item.name" placement="top-start" :disabled="props.fileExpandCollapse">
          <img
            :src="getFileStatusImg(item.analysisStatus)"
            alt=""
            class="file-item-img"
            :class="{ 'file-item-img-collapse': !props.fileExpandCollapse, 'is-gif': item.analysisStatus == 3 }"
          />
        </el-tooltip>
        <div v-show="props.fileExpandCollapse" class="ml-10 file-item-title overflow-ellipsis">
          {{ item.name }}
        </div>
      </div>
    </div>
    <empty v-else />
  </div>
</template>

<script setup>
  import fileImg from '@/assets/images/analysis/file.png';
  import loadingGif from '@/assets/images/analysis/loading.gif';
  import failImg from '@/assets/images/analysis/fail.png';
  import FileUpload from '@/components/FileUpload/index.vue';
  import { getAnalysisList, getReanalysis, deleteAnalysis } from '@/api/analysis';

  const { proxy } = getCurrentInstance();

  const props = defineProps({
    fileExpandCollapse: {
      type: Boolean,
      default: true,
    },
  });

  const fileList = ref([]);
  const selectItem = ref({});
  let timer = null;

  onMounted(() => {
    getData();
  });

  const getFileStatusImg = type => {
    switch (Number(type)) {
      case 1:
        return fileImg;
        break;
      case 2:
        return failImg;
        break;
      case 3:
        return loadingGif;
        break;
      default:
        return fileImg;
        break;
    }
  };

  const getData = () => {
    getAnalysisList().then(res => {
      fileList.value = res.data;
    });

    if (timer) {
      clearInterval(timer);
    }

    timer = setInterval(() => {
      getAnalysisList().then(res => {
        fileList.value = res.data;
      });
    }, 30000);
  };

  const uploadSuccessfully = () => {
    getData();
  };

  const handleExpandCollapse = () => {
    emit('expandCollapse', 'file');
  };

  const handleSelect = item => {
    if (item.analysisStatus == 1) {
      selectItem.value = item;
      emit('selectStandard', item);
    } else if (item.analysisStatus == 2) {
      proxy.$modal.msgWarning('文件解析失败，请重新解析');
      selectItem.value = item;
      emit('selectStandard', item);
    } else if (item.analysisStatus == 3) {
      proxy.$modal.msgWarning('该文件正在解析中，请稍后再试');
      emit('selectStandard', '');
    }
  };

  const handleReanalysis = () => {
    if (selectItem.value && selectItem.value.id) {
      proxy
        .$confirm('确认重新解析文件【' + selectItem.value.name + '】？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          let obj = {
            id: selectItem.value.id,
            name: selectItem.value.name,
            url: selectItem.value.path,
          };
          getReanalysis(obj).then(res => {
            getData();
            selectItem.value = {};
            emit('selectStandard', '');
          });
        })
        .catch(() => {});
    } else {
      proxy.$modal.msgWarning('请选择标准文件');
    }
  };

  const handleDelete = () => {
    if (selectItem.value && selectItem.value.id) {
      proxy
        .$confirm('确认删除文件【' + selectItem.value.name + '】？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(() => {
          deleteAnalysis({ ids: [selectItem.value.id] }).then(res => {
            getData();
            emit('selectStandard', '');
          });
        })
        .catch(() => {});
    } else {
      proxy.$modal.msgWarning('请选择标准文件');
    }
  };

  const emit = defineEmits(['expandCollapse', 'selectStandard']);

  onUnmounted(() => {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  });
</script>

<style lang="scss" scoped>
  .file {
    padding: 24px 15px 0;
    box-sizing: border-box;
    transition: padding 0.3s ease-in-out;

    &-expand {
      height: 16px;
      cursor: pointer;
      transition: all 0.3s ease-in-out;
    }

    &-item {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      padding: 0 8px 0 13px;
      box-sizing: border-box;
      cursor: pointer;
      transition: all 0.3s ease-in-out;

      &:hover {
        background-color: #edf2ff;
        border-radius: 3px;
      }

      &:hover &-title {
        font-weight: bold;
        color: $primary-color !important;
      }

      &-img {
        height: 19px;
      }

      &-title {
        flex: 1;
        font-size: 16px;
        color: #333;
      }
    }
  }

  .active {
    background-color: #edf2ff;

    .file-item-title {
      font-weight: bold;
      color: $primary-color !important;
    }
  }

  .analysis-scrollbar {
    padding: 0 7px 0 15px;
    height: calc(100vh - 86px - 123px);
  }

  .file-collapse {
    padding: 24px 0 10px !important;
  }

  .file-expand-collapse {
    display: block;
    margin: 0 auto 80px !important;
    transform: rotate(180deg);
  }

  .file-item-collapse {
    padding: 0 !important;
    justify-content: center;

    &:hover {
      background-color: #fff;
    }
  }

  .file-item-img-collapse {
    margin: 0 auto;
  }

  .is-gif {
    width: 16px !important;
    height: 16px !important;
  }
</style>
